<template>
	<div class="buttons">
		<div class="lt">
			<el-checkbox-group
				v-model="video"
				size="mini"
			>
				<el-checkbox-button>视频</el-checkbox-button>
			</el-checkbox-group>
		</div>
		<div class="rt">
			<p>声光报警</p>
			<el-switch
				@click.native="bindSwitchClick"
				:value="voice"
        :disabled="disable"
			>
			</el-switch>
		</div>
	</div>
</template>

<script>

  import { getGlare,isGlareOnline } from "@/api/page/index";

	export default {
		name: "buttons",
		props: {
			buttons: {
				type: Object,
				default: () => ({})
			},
			videoProp: {
				type: Boolean,
				default: false
			},
			voiceProp: {
				type: Boolean,
				default: false
			}
		},
		data() {
		  console.log("voice:"+this.voiceProp);
			return {
				video: this.videoProp,
				voice: this.voiceProp,
        disable: true
			};
		},
		watch: {
			video() {
				this.$emit("change", "video", this.video);
			},
		},
		computed: {},
		methods: {
			bindSwitchClick() {
        var self = this;
        isGlareOnline().then(res=>{
          if (!res.data){
            this.msgError("声光报警器未在线，不能控制!");
            return false;
          }else{
            var status = self.voice?'关闭':'开启';
            this.$confirm("是否"+status+"所有设备的报警灯？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                self.voice = !this.voice;
                self.$emit("change", "voice", self.voice);
              })
              .catch(() => {});
          }
        });
			}
		},
		mounted() {
		  var self = this;
      isGlareOnline().then(res=>{
        self.voice = res.data;
        self.disable = !res.data;
      });
    }
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
	.buttons {
		background-color: #fff;
		border: 1px solid #eee;
		margin-top: $dsMain;
		@include flex(space-between, center);
		border-radius: 4px;
		height: 40px;
		line-height: 40px;
		.lt {
			width: 50%;
			@include flex(center, center);
			border-right: 1px solid #ddd;
		}
		.rt {
			width: 50%;
      cursor: pointer;
			@include flex(center, center);
			p {
				color: #323232;
				font-size: 14px;
				margin-right: 10px;
			}
		}
		/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
			border-radius: 4px 4px;
		}
		// /deep/.el-checkbox-button__inner {
		// 	color: #999;
		// 	border: 1px solid #dcdfe6 !important;
		// }
		// /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
		// 	color: #333;
		// 	background-color: #fff;
		// }
	}
</style>
